<template>
  <div class="full-width full-height" style="padding: 16px 0">
    <div class="flex items-center justify-between margin-l-20 margin-r-20" style="padding-bottom: 16px;border-bottom: 1px solid #d3d3d3" >
      <div>新闻中心</div>
      <div class="text-grey cursor-pointer" @click="$router.push('/main/home/news')">
        更多
        <q-icon name="keyboard_arrow_right"/>
      </div>
    </div>
    <q-scroll-area class="full-width" style="height: calc(100% - 33px)" :thumb-style="thumbStyle">
      <div v-for="(item, index) in newsList" :key="index" @click="toDetail(item.id)">
        <div class="flex news-item items-center justify-between cursor-pointer">
          <div class="flex-1 flex items-center" style="width: calc(100% - 72px)" v-if="item.isNew">
            <div class="tips"></div>
            <div class="text-ellipsis" style="max-width: calc(100% - 76px)">{{item.title}}</div>
            <div class="new">NEW</div>
          </div>
          <div class="flex-1 flex items-center" style="width: calc(100% - 72px)" v-else>
            <div class="tips"></div>
            <div class="text-ellipsis" style="width: calc(100% - 20px);padding-right: 10px">{{item.title}}</div>
          </div>
          <div class="text-grey">{{item.createDate}}</div>
          <q-tooltip>{{item.title}}</q-tooltip>
        </div>
      </div>
    </q-scroll-area>
  </div>
</template>

<script>
import { getNoticeNews } from 'src/boot/home/home-new'
import { date } from 'quasar'
export default {
  name: 'news-list',
  data () {
    return {
      thumbStyle: this.CommonConfig.thumbStyle,
      newsList: [],
      pageNum: 1, // 当前页数
      pageSize: 20 // 每页多少条
    }
  },
  created () {
    this.getList()
  },
  methods: {
    getList () {
      let params = {
        category: 'NEWS',
        pageNum: this.pageNum,
        pageSize: this.pageSize
      }
      const now = new Date()

      getNoticeNews(params).then(res => {
        this.newsList = res.data.records.map(item => {
          return {
            ...item,
            isNew: date.getDateDiff(item.createTime, now, 'months') < 0.5
          }
        })
      })
      // this.newsList = _.cloneDeep(newsList)
      // const now = moment(new Date())
      // this.newsList.forEach(item => {
      //   item.isNew = now.diff(moment(item.date), 'years', true) < 0.5
      // })
    },
    toDetail (id) {
      this.$router.push({
        path: `/main/home/news/news-detail_1`,
        query: {
          id
        }
      })
    }
  }
}
</script>

<style scoped lang="stylus">
  .padding-20 {
    padding 20px
  }
  .text-grey{
    color #999
  }
  .news-item{
    padding 15px 20px
    .tips{
      width 10px
      height 10px
      background #5F77FD
      border-radius 50%
      margin-right 10px
    }
    .new{
      width 36px
      height 16px
      border-radius 8px 0px 8px 8px
      color #fff
      text-align center
      line-height 16px
      background-color #E43434
      font-size 12px
      margin 0 10px
    }
    &:hover{
      background-color #DFE4FF
    }
  }
</style>
